
<h1>Listing Clients</h1>
<table id="clients-table">
  <thead><tr><th>Id</th><th>Name</th><th>Type</th><th>Secret</th><th>Room</th><th>Nicks</th><!--<th colspan="2"></th>--></tr></thead>

  <tbody>
    <% @clients.each do | client | %>
      <tr>
        <td><%= client.id                                                 %></td>
        <td><%= client.name                                               %></td>
        <td><%= client.type                                               %></td>
        <td><%= client.secret                                             %></td>
        <% if client.room.nil? %>
        <td><%= "room nil"                                                %></td>
        <% else %>
        <td>#<% path = "#{root_path}/rooms/#{client.room.id}" %>
            <%= client.room.id %>
            <%= client.room.secret %>
            <%= link_to client.room.clients.size.to_s + " bridged" , path %></td>
        <% end %>
        <td><% (client.nicks.split '.').each do | nick | %>
              <%= nick %><br />
            <% end                                                        %></td>

<!--         <td><%= link_to 'Edit', 'edit_client_path(client)' %></td> -->
<!--         <td><%= link_to 'Destroy', 'client', method: :delete, data: { confirm: 'Are you sure?' } %></td> -->
      </tr>
    <% end %>
  </tbody>
</table>


<div class="cell">
  <h1>Listing Rooms</h1>
<table id="rooms-table">
  <thead><tr><th>Id</th><th>Secret</th><th>Clients</th><th>Messages</th></tr></thead>

  <tbody>
    <% @rooms.each do | room | %>
      <tr>
        <td><%= room.id                              %></td>
        <td><%= room.secret                          %></td>
        <td><% room.clients.each do | client | %>
              <%= "##{client.id} #{client.name}"     %><br />
            <% end                                   %></td>
        <td id="<%= "room-#{room.id}-td" %>">          </td>
      </tr>
    <% end %>
  </tbody>
</table>
</div>

<br>

<!-- <%= link_to 'New Client', 'new_client_path' %> -->


<script type="text/javascript">

function init()
{
  var room_hash ;
  var rooms = [] ;

  <% @rooms.each do | room | %>
  room_hash = { 'client_name':   "<%= room.clients.first.name   %>"                     ,
                'client_secret': "<%= room.clients.first.secret %>"                     ,
                'chat_td':       document.getElementById('<%= "room-#{room.id}-td" %>') } ;
  rooms.push(room_hash) ;
  pollChat  (room_hash) ;
  <% end %>

  window.setInterval(function() { rooms.forEach(pollChat) ; } , 10000) ;
}

function pollChat(room_hash)
{
  var client_name   = room_hash['client_name'  ] ;
  var client_secret = room_hash['client_secret'] ;
  var chat_td       = room_hash['chat_td'      ] ;
  var url           = '/clients/' + client_name + '/messages' ;
  var req_params    = '{"client":{"secret":"' + client_secret + '"},"last_id":0}' ;
  var pollReq       = new XMLHttpRequest() ;

  pollReq.open("POST" , url) ;
  pollReq.setRequestHeader("Content-Type", 'application/json') ;
  pollReq.setRequestHeader("Accept"      , 'application/json') ;
  pollReq.onreadystatechange = function(evt) { displayChat(parseResp(pollReq) , chat_td) ; }
  pollReq.send(req_params) ;
}

function parseResp(pollReq)
{
  if (pollReq.readyState != XMLHttpRequest.DONE || pollReq.status != 200) return [] ;

  var resp_hash ;

  try       { resp_hash = JSON.parse(pollReq.responseText) ; }
  catch(ex) { return []                                      }

  return resp_hash['messages'] ;
}

function displayChat(messages , chat_td)
{
  if (messages.length == 0) return ;

  var html = "<table id='chat-table'>" ;
  messages.forEach(function(message_hash)
  {
    html += "<tr><td>"  + message_hash['nick'] + ":"          +
            "</td><td>" + message_hash['text'] + "</td></tr>" ;
  }) ;
  chat_td.innerHTML = html + "</table>" ;
}


window.onload = init ;

</script>


<style>

html                               { background-color: #000 ; color: #888 ; }
div.cell                           { display: table-cell ; padding: 1em ; }
#clients-table , #clients-table td ,
#rooms-table   , #rooms-table td   { border: 1px solid #fff ; padding: 1em ; }
#chat-table    , #chat-table td    { border: 0px ; padding: 0em 1em 0em 1em ; }

</style>
